<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- CSS -->
    <link rel="stylesheet" href="../assets/css/HuiGu.css" />
    <!-- 图标 -->
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
    <!-- 谷歌字体 -->

    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css"
      rel="stylesheet"
    />

    <!--=============== REMIXICONS ===============-->
    <link
      href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css"
      rel="stylesheet"
    />

    <title>腊八粥-初一</title>
  </head>
  <body id="top">
    <!-- 标题 -->
    <header class="header" data-header>
      <div class="container">
        <a href="#" class="logo"
          ><img src="../assets/images/Home/bg.webp" loading="lazy" alt="logo"
        /></a>
        <h2 class="h2 banner">初一</h2>
        <!-- 按钮 -->
        <button class="nav-toggle-btn" data-nav-toggle-btn>
          <ion-icon name="menu-outline" class="open"></ion-icon>
          <ion-icon name="close-outline" class="close"></ion-icon>
        </button>
        <nav class="navbar">
          <div class="container">
            <ul class="navbar-list">
              <li>
                <a href="./home.html#home" class="navbar-link" data-navbar-link
                  >主页</a
                >
              </li>
              <li>
                <a
                  href="./home.html#features"
                  class="navbar-link"
                  data-navbar-link
                  >回顾</a
                >
              </li>
              <li>
                <a
                  href="./home.html#service"
                  class="navbar-link"
                  data-navbar-link
                  >老师</a
                >
              </li>
              <li>
                <a href="./home.html#blog" class="navbar-link" data-navbar-link
                  >大事记</a
                >
              </li>
              <li>
                <a
                  href="./home.html#newsletter"
                  class="navbar-link"
                  data-navbar-link
                  >信箱</a
                >
              </li>
            </ul>
          </div>
        </nav>
        <a
          href="https://www.bilibili.com/video/BV1Qf4y1Z7cW/"
          target="_blank"
          rel="noopener noreferrer"
          ><button class="btn btn-primary">
            <span>我们毕业啦</span>
            <ion-icon name="chevron-forward-outline"></ion-icon></button
        ></a>
      </div>
    </header>

    <main>
      <article>
        <!-- 图片轮播 -->
        <section class="pic">
          <div class="roll-description">
            <h3 class="h3">回忆我们的风采</h3>
          </div>
          <div class="out">
            <div class="inner">
              <div class="img">
                <img
                  src="../assets/images/ChuYi/LiuYi.webp"
                  loading="lazy"
                  alt=""
                />
              </div>
              <div class="img">
                <img
                  src="../assets/images/ChuYi/LiuYi2.webp"
                  loading="lazy"
                  alt=""
                />
              </div>
              <div class="img">
                <img
                  src="../assets/images/ChuYi/QiuYou.webp"
                  loading="lazy"
                  alt=""
                />
              </div>
              <div class="img">
                <img
                  src="../assets/images/ChuYi/QiuYou2.webp"
                  loading="lazy"
                  alt=""
                />
              </div>
              <div class="img">
                <img
                  src="../assets/images/ChuYi/QiuYou3.webp"
                  loading="lazy"
                  alt=""
                />
              </div>
              <div class="img">
                <img
                  src="../assets/images/ChuYi/YunDongHui1.webp"
                  loading="lazy"
                  alt=""
                />
              </div>
              <div class="img">
                <img
                  src="../assets/images/ChuYi/YunDongHui3.webp"
                  loading="lazy"
                  alt=""
                />
              </div>
            </div>
            <div class="arrow">
              <i class="bx bx-chevron-left left"></i>
              <i class="bx bx-chevron-right right"></i>
            </div>
            <div class="button">
              <p class="roll-p"></p>
              <p class="roll-p"></p>
              <p class="roll-p"></p>
              <p class="roll-p"></p>
              <p class="roll-p"></p>
              <p class="roll-p"></p>
              <p class="roll-p"></p>
            </div>
          </div>
        </section>
        <section class="pic-roll">
          <div class="roll-description">
            <h3 class="h3">回忆我们的风采</h3>
          </div>
          <div class="roll">
            <div class="list">
              <div>
                <img
                  src="../assets/images/ChuYi/LiuYi.webp"
                  loading="lazy"
                  alt=""
                />
              </div>
              <div>
                <img
                  src="../assets/images/ChuYi/LiuYi2.webp"
                  loading="lazy"
                  alt=""
                />
              </div>
              <div>
                <img
                  src="../assets/images/ChuYi/QiuYou.webp"
                  loading="lazy"
                  alt=""
                />
              </div>
              <div>
                <img
                  src="../assets/images/ChuYi/QiuYou2.webp"
                  loading="lazy"
                  alt=""
                />
              </div>
              <div>
                <img
                  src="../assets/images/ChuYi/QiuYou3.webp"
                  loading="lazy"
                  alt=""
                />
              </div>
              <div>
                <img
                  src="../assets/images/ChuYi/YunDongHui1.webp"
                  loading="lazy"
                  alt=""
                />
              </div>
              <div>
                <img
                  src="../assets/images/ChuYi/YunDongHui3.webp"
                  loading="lazy"
                  alt=""
                />
              </div>
            </div>
          </div>
        </section>
        <!-- 大事记 -->
        <section class="blog" id="blog">
          <div class="container">
            <p class="section-subtitle">大事记</p>
            <h2 class="h2 section-title">初一的经典活动</h2>
            <ul class="blog-list">
              <!-- 第一个 -->
              <li>
                <div class="blog-card">
                  <figure class="blog-banner">
                    <img
                      src="../assets/images/ChuYi/QiuYou2.webp"
                      alt=""
                      loading="lazy"
                      class="w-100"
                    />
                  </figure>
                  <div class="blog-content">
                    <ul class="blog-meta-list">
                      <!-- 名字 -->
                      <li class="blog-meta-item">
                        <ion-icon name="pricetag-outline"></ion-icon>
                        <a href="#" class="blog-meta-link">秋游</a>
                      </li>
                      <!-- 时间 -->
                      <li class="blog-meta-item">
                        <ion-icon name="calendar-number-outline"></ion-icon>
                        <time class="blog-meta-time" datetime="2019-11-15"
                          >2019年8月15日</time
                        >
                      </li>
                    </ul>

                    <h3 class="h3 blog-title">
                      前往东方绿舟秋游，寻找秋天的足迹
                    </h3>
                  </div>
                </div>
              </li>
              <!-- 第二个 -->
              <li>
                <div class="blog-card">
                  <figure class="blog-banner">
                    <img
                      src="../assets/images/ChuYi/SunQiao.webp"
                      alt=""
                      loading="lazy"
                      class="w-100"
                    />
                  </figure>
                  <div class="blog-content">
                    <ul class="blog-meta-list">
                      <!-- 名字 -->
                      <li class="blog-meta-item">
                        <ion-icon name="pricetag-outline"></ion-icon>
                        <a href="#" class="blog-meta-link">社会实践</a>
                      </li>
                      <!-- 时间 -->
                      <li class="blog-meta-item">
                        <ion-icon name="calendar-number-outline"></ion-icon>
                        <time class="blog-meta-time" datetime="2019-11-19"
                          >2019年11月19日</time
                        >
                      </li>
                    </ul>

                    <h3 class="h3 blog-title">
                      前往孙桥现代农业科普教育基地，学习农业科技，弘扬劳动精神
                    </h3>
                  </div>
                </div>
              </li>
              <!-- 第三个 -->
              <li>
                <div class="blog-card">
                  <figure class="blog-banner">
                    <img
                      src="../assets/images/ChuYi/YunDongHui2.webp"
                      alt=""
                      loading="lazy"
                      class="w-100"
                    />
                  </figure>
                  <div class="blog-content">
                    <ul class="blog-meta-list">
                      <!-- 名字 -->
                      <li class="blog-meta-item">
                        <ion-icon name="pricetag-outline"></ion-icon>
                        <p class="blog-meta-link">运动会</p>
                      </li>
                      <!-- 时间 -->
                      <li class="blog-meta-item">
                        <ion-icon name="calendar-number-outline"></ion-icon>
                        <time class="blog-meta-time" datetime="2019-11"
                          >2019年11月</time
                        >
                      </li>
                    </ul>

                    <h3 class="h3 blog-title">我们的小型运动会,斩获佳绩</h3>
                  </div>
                </div>
              </li>
              <!-- 第四个 -->
              <li>
                <div class="blog-card">
                  <figure class="blog-banner">
                    <img
                      src="../assets/images/ChuYi/YiShu.webp"
                      alt=""
                      loading="lazy"
                      class="w-100"
                    />
                  </figure>
                  <div class="blog-content">
                    <ul class="blog-meta-list">
                      <!-- 名字 -->
                      <li class="blog-meta-item">
                        <ion-icon name="pricetag-outline"></ion-icon>
                        <p class="blog-meta-link">艺术节</p>
                      </li>
                      <!-- 时间 -->
                      <li class="blog-meta-item">
                        <ion-icon name="calendar-number-outline"></ion-icon>
                        <time class="blog-meta-time" datetime="2019-12"
                          >2019年12月</time
                        >
                      </li>
                    </ul>

                    <h3 class="h3 blog-title">
                      精心排练并参加艺术节初一年级汇演，八班小品《畅阳的班长梦》寓理深刻
                    </h3>
                  </div>
                </div>
              </li>
              <!-- 第五个 -->
              <li>
                <div class="blog-card">
                  <figure class="blog-banner">
                    <img
                      src="../assets/images/ChuYi/LiuYi.webp"
                      alt=""
                      loading="lazy"
                      class="w-100"
                    />
                  </figure>
                  <div class="blog-content">
                    <ul class="blog-meta-list">
                      <!-- 名字 -->
                      <li class="blog-meta-item">
                        <ion-icon name="pricetag-outline"></ion-icon>
                        <p class="blog-meta-link">活动</p>
                      </li>
                      <!-- 时间 -->
                      <li class="blog-meta-item">
                        <ion-icon name="calendar-number-outline"></ion-icon>
                        <time class="blog-meta-time" datetime="2019-6-1"
                          >2019年6月1日</time
                        >
                      </li>
                    </ul>

                    <h3 class="h3 blog-title">
                      最后一次儿童节，活动内容让人惊喜
                    </h3>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </section>
      </article>
    </main>

    <!-- footer -->

    <footer class="footer">
      <div class="footer-top">
        <div class="container">
          <div class="footer-brand">
            <a href="#" class="logo">
              <img
                src="../assets/images/Home/bg.webp"
                alt="logo"
                loading="lazy"
              />
            </a>
            <p class="section-text">
              腊八粥的保质期会越来越长，感谢同学们这四年来的鼎力协助和精诚合作。<br />
              本人庶竭驽钝，希望给大家留下回忆的地方
            </p>
            <div class="location-text">
              <div class="location-icon">
                <ion-icon name="location-outline"></ion-icon>
              </div>

              <address class="address">上海市浦东新区藿香路38号</address>
            </div>
          </div>

          <div class="quicklink-box">
            <p class="h3 quicklink-title">快速跳转</p>
            <ul class="quicklink-list">
              <li>
                <a
                  href="https://zhe-sh-cn.gitee.io/banshi/"
                  class="quicklink"
                  target="_blank"
                  rel="noopener noreferrer"
                  >班史</a
                >
              </li>
              <li>
                <a href="./YuChu.html" class="quicklink">预初</a>
              </li>
              <li>
                <a href="./ChuYi.html" class="quicklink">初一</a>
              </li>
              <li>
                <a href="./ChuEr.html" class="quicklink">初二</a>
              </li>
              <li>
                <a href="./ChuSan.html" class="quicklink">初三</a>
              </li>
              <li>
                <a
                  href="https://zhe-sh-cn.gitee.io/banshi/tags/%E6%81%A9%E5%B8%88/"
                  target="_blank"
                  rel="noopener noreferrer"
                  class="quicklink"
                  >老师</a
                >
              </li>
              <li>
                <a href="./DaShiJi.html#JunXu" class="quicklink"
                  >大事记——军训</a
                >
              </li>
              <li>
                <a href="./DaShiJi.html#YiShuJie" class="quicklink"
                  >大事记——艺术节</a
                >
              </li>
              <li>
                <a href="./DaShiJi.html#YiMai" class="quicklink"
                  >大事记——义卖</a
                >
              </li>
              <li>
                <a href="./MailBox.html" class="quicklink">信箱</a>
              </li>
            </ul>
          </div>

          <div class="contact">
            <p class="h3 contact-title">联系作者</p>
            <ul class="contact-list">
              <li class="contact-item">
                <div class="contact-icon">
                  <ion-icon name="mail-outline"></ion-icon>
                </div>
                <a
                  href="mailto:1968988211@qq.com"
                  class="contact-link"
                  target="_blank"
                  rel="noopener noreferrer"
                  >1968988211@qq.com</a
                >
              </li>
              <li class="contact-item">
                <div class="contact-icon">
                  <ion-icon name="logo-github"></ion-icon>
                </div>
                <a
                  href="https://github.com/Zhe-SH-CN/LaBaZhou"
                  class="contact-link"
                  target="_blank"
                  rel="noopener noreferrer"
                  >LaBaZhou(开源地址）</a
                >
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="footer-bottom">
        <div class="container">
          <p class="copyright">
            &copy; 2022
            <a
              href="https://github.com/Zhe-SH-CN"
              target="_blank"
              rel="noopener noreferrer"
              >Zhe-SH-CN</a
            >
            All Rights Reserved.
          </p>
          <ul class="social-list">
            <li>
              <a
                href="https://space.bilibili.com/626749843"
                class="social-link"
                target="_blank"
                rel="noopener noreferrer"
              >
                <!-- <ion-icon name="logo-tiktok"></ion-icon> -->
                <i class="ri-bilibili-fill"></i>
              </a>
            </li>

            <li>
              <a
                href="https://github.com/Zhe-SH-CN"
                class="social-link"
                target="_blank"
                rel="noopener noreferrer"
                ><i class="ri-github-fill"></i>
              </a>
            </li>
            <li>
              <a
                href="#"
                class="social-link"
                target="_blank"
                rel="noopener noreferrer"
                ><ion-icon name="logo-wechat"></ion-icon>
              </a>
            </li>
            <li>
              <a
                href="https://www.douyin.com/user/MS4wLjABAAAAv6cDsa_0S901g3KhQGIGDOkMfyxQ7m3h2K5eMSBeNzk"
                class="social-link"
                target="_blank"
                rel="noopener noreferrer"
                ><ion-icon name="logo-tiktok"></ion-icon>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </footer>

    <!-- Go to Top -->
    <a href="#top" class="go-top active" data-go-top>
      <ion-icon name="chevron-up-outline"></ion-icon>
    </a>

    <!-- js -->
    <script src="../assets/js/HuiGu.js"></script>

    <!-- 图标 -->
    <script
      type="module"
      src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"
    ></script>
    <script
      nomodule
      src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"
    ></script>
  </body>
</html>
